<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!-- Content Header (Page header) -->
<section class="content-header" style="">
    <h1>
        商户信息管理
        <small>大屏显示管理</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li><a href="#">商户信息管理</a></li>
        <li class="active">大屏显示管理</li>
    </ol>
</section>

<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <!-- /.box-header -->
                <div class="box-body">
                    <div id="toolbar">
                        <form class="form-inline" id="searchForm">
                            <div class="form-group">
                                <label for="searchuserName"> 商家名</label>
                                <input type="text" class="form-control input-sm" name="userName" id="searchuserName" placeholder="请输入商家名">
                            </div>
                            <div class="form-group">
                                <label for="searchcompanyName">
                                    商家编号</label>
                                <input type="text" class="form-control input-sm" name="companyid" id="searchcompanyName" placeholder="商家编号">
                            </div>
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-default" onclick="javascript:$('table').bootstrapTable('refresh', {silent: true});">
                                    <i class="glyphicon glyphicon-search"></i>
                                    查询
                                </button>
                                <button type="reset" class="btn btn-default">
                                    <i class="glyphicon glyphicon-trash"></i>
                                    清空
                                </button>
                            </div>
                        </form>
                        <div class="btn-group btn-group-sm">
                            <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                            <button  onclick="yin()" shiro:hasPermission="company:create" type="button" id="addBtn" class="btn btn-default"
                                    data-toggle="modal"
                                    data-target="#addModal"><i class="glyphicon glyphicon-plus"></i> 新增
                            </button>
                            <!-- Indicates caution should be taken with this action -->
                            <button shiro:hasPermission="company:update" type="button" id="editBtn" class="btn btn-default"
                                    data-toggle="modal"
                                    data-target="#editModal"
                                    data-action="{type:'editable',form:'#editForm',table:'#table',after:'editAfter'}"
                                    disabled><i class="glyphicon glyphicon-edit"></i> 修改
                            </button>
                            <!-- Indicates a dangerous or potentially negative action -->
                            <button shiro:hasPermission="company:delete" type="button" id="deleteBtn" class="btn btn-default" data-toggle="modal"
                                    data-target="#deleteModal"
                                    data-action="{type:'delete',form:'#deleteForm',idField:'id',table:'#table'}"
                                    disabled><i class="glyphicon glyphicon-remove"></i> 删除
                            </button>
                        </div>
                    </div>
                    <table id="table"></table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->

        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
<!-- /.content -->
<!-- add Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="addModalLabel">新增</h4>
            </div>
            <div class="modal-body">
                <form id="addForm">
                    <div class="form-group">
                        <label class="control-label" for="userName"><span class="asterisk">*</span>商家名:</label>
                        <input id="userName" type="text" class="form-control" name="userName" placeholder="请输入商家名"
                               minlength="3" required>
                        <div class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="CompanyId"><span class="asterisk">*</span>商家编号:</label>
                        <input id="CompanyId" type="text" class="form-control" name="companyid" placeholder="请输入商家编号"
                               minlength="3" required>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="CompanyId"><span class="asterisk">*</span>倍数:</label>
                        <input id="percentage" type="text" class="form-control" name="percentage" placeholder="请输入倍数"
                               minlength="1" required>
                    </div>
                    <div class="form-group">
                        <label class="control-label" ><span class="asterisk">*</span>是否有刷卡:</label>
                        是<input type="radio"  name="locked"  id="editxiuyao" value="1" onclick="idCode(1)">
                        否<input type="radio"  name="locked"  id="editbuxiuyao" value="0" onclick="idCode(0)" checked>
                        <div class="help-block with-errors" ></div>
                    </div>

                    <div id="scanister">
                        <hr/>
                        <h4 class="modal-title" id="detailskancloudpay">第三方支付的数据库地址</h4>
                        <input  id="cardType" name="databaseVos[0].cardType" style="display: none" value="0">
                        <div class="form-group">
                            <label class="control-label" for="channel"><span class="asterisk">*</span>sql渠道:</label>
                            <select name="databaseVos[0].channel" id="channel" class="form-control"
                                    data-placeholder="请从列表选择一项" required>
                                <option value="">请选择查询渠道</option>
                                <option th:each="SqlChannel : ${sqltype}" th:value="${SqlChannel.infoId}" th:text="${SqlChannel.info}">
                                    sql渠道不存在
                                </option>
                            </select>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="ip"><span class="asterisk">*</span>数据库ip:</label>
                            <input id="ip" name="databaseVos[0].ip" type="text" class="form-control"  placeholder="输入数据库ip" required>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="port"><span class="asterisk">*</span>数据库端口:</label>
                            <input id="port" name="databaseVos[0].port" type="text" class="form-control" placeholder="输入数据库端口" required>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="DatabaseName"><span class="asterisk">*</span>数据库的库名:</label>
                            <input id="DatabaseName" name="databaseVos[0].DatabaseName" type="text" class="form-control" placeholder="输入数据库的库名" required>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="user"><span class="asterisk">*</span>数据库的用户名:</label>
                            <input id="user" name="databaseVos[0].user" type="text" class="form-control" placeholder="输入数据库的用户名" required>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="password"><span class="asterisk">*</span>数据库的密码:</label>
                            <input id="password" name="databaseVos[0].password" type="text" class="form-control" placeholder="输入数据库的密码" required>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="driver"><span class="asterisk">*</span>数据库的驱动:</label>
                            <input id="driver" name="databaseVos[0].driver" type="text" class="form-control" placeholder="输入数据库的驱动" required>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>

                    <div id="card">
                        <hr/>
                        <h4 class="modal-title" id="cards">刷卡的数据库地址</h4>
                        <input  id="cardTypes"  style="display: none" value="1">
                        <div class="form-group">
                            <label class="control-label" for="cardchannel"><span class="asterisk">*</span>sql渠道:</label>
                            <select  id="cardchannel" class="form-control"
                                    data-placeholder="请从列表选择一项">
                                <option value="">请选择查询渠道</option>
                                <option th:each="SqlChannel : ${sqltype}" th:value="${SqlChannel.infoId}" th:text="${SqlChannel.info}">
                                    sql渠道不存在
                                </option>
                            </select>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="cardIp"><span class="asterisk">*</span>数据库ip:</label>
                            <input id="cardIp" type="text" class="form-control"  placeholder="输入数据库ip">
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="cardPort"><span class="asterisk">*</span>数据库端口:</label>
                            <input id="cardPort" type="text" class="form-control" placeholder="输入数据库端口">
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="cardDatabaseName"><span class="asterisk">*</span>数据库的库名:</label>
                            <input id="cardDatabaseName" type="text" class="form-control" placeholder="输入数据库的库名">
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="cardUser"><span class="asterisk">*</span>数据库的用户名:</label>
                            <input id="cardUser" type="text" class="form-control" placeholder="输入数据库的用户名">
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="cardPassword"><span class="asterisk">*</span>数据库的密码:</label>
                            <input id="cardPassword" type="text" class="form-control" placeholder="输入数据库的密码">
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="cardDriver"><span class="asterisk">*</span>数据库的驱动:</label>
                            <input id="cardDriver" type="text" class="form-control" placeholder="输入数据库的驱动">
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button onclick="yin()" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" form="addForm" class="btn btn-primary"
                        data-action="{type:'submit',form:'#addForm',url:'@{/display/create}',after:'$.myAction.refreshTable'}">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>
<!-- edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="editModalLabel">修改</h4>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <input  id="displayId" name="id" style="display: none" value="0">
                    <div class="form-group">
                        <label class="control-label" for="userName"><span class="asterisk">*</span>商家名:</label>
                        <input id="edituserName" type="text" class="form-control" name="userName" placeholder="请输入商家名"
                               minlength="3" required>
                        <div class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="CompanyId"><span class="asterisk">*</span>商家编号:</label>
                        <input id="editCompanyId" type="text" class="form-control" name="companyid" placeholder="请输入商家编号"
                               minlength="3" required>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="CompanyId"><span class="asterisk">*</span>倍数:</label>
                        <input id="editpercentage" type="text" class="form-control" name="percentage" placeholder="请输入倍数"
                               minlength="1" required>
                    </div>
                    <div class="form-group">
                        <label class="control-label" ><span class="asterisk">*</span>是否有刷卡:</label>
                        是<input type="radio" name="locked"  id="editeditxiuyao" value="1" onclick="editidCode(1)">
                        否<input type="radio" name="locked"  id="editeditbuxiuyao" value="0" onclick="editidCode(0)" checked>
                        <div class="help-block with-errors" ></div>
                    </div>

                    <div id="editscanister">
                        <hr/>
                        <h4 class="modal-title" id="editscanisters">第三方支付的数据库地址</h4>
                        <input  id="editcardType" name="databaseVos[0].cardType" style="display: none" value="0">
                        <div class="form-group">
                            <label class="control-label" for="editchannel"><span class="asterisk">*</span>sql渠道:</label>
                            <select name="databaseVos[0].channel" id="editchannel" class="form-control"
                                    data-placeholder="请从列表选择一项" required>
                                <option value="">请选择查询渠道</option>
                                <option th:each="SqlChannel : ${sqltype}" th:value="${SqlChannel.infoId}" th:text="${SqlChannel.info}">
                                    sql渠道不存在
                                </option>
                            </select>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="editip"><span class="asterisk">*</span>数据库ip:</label>
                            <input id="editip" name="databaseVos[0].ip" type="text" class="form-control"  placeholder="输入数据库ip" required>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="editport"><span class="asterisk">*</span>数据库端口:</label>
                            <input id="editport" name="databaseVos[0].port" type="text" class="form-control" placeholder="输入数据库端口" required>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="editDatabaseName"><span class="asterisk">*</span>数据库的库名:</label>
                            <input id="editDatabaseName" name="databaseVos[0].DatabaseName" type="text" class="form-control" placeholder="输入数据库的库名" required>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="edituser"><span class="asterisk">*</span>数据库的用户名:</label>
                            <input id="edituser" name="databaseVos[0].user" type="text" class="form-control" placeholder="输入数据库的用户名" required>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="editpassword"><span class="asterisk">*</span>数据库的密码:</label>
                            <input id="editpassword" name="databaseVos[0].password" type="text" class="form-control" placeholder="输入数据库的密码" required>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="editdriver"><span class="asterisk">*</span>数据库的驱动:</label>
                            <input id="editdriver" name="databaseVos[0].driver" type="text" class="form-control" placeholder="输入数据库的驱动" required>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>

                    <div id="editcard">
                        <hr/>
                        <h4 class="modal-title" id="editcards">刷卡的数据库地址</h4>
                        <input  id="editcardTypes"  style="display: none" value="1">
                        <div class="form-group">
                            <label class="control-label" for="cardchannel"><span class="asterisk">*</span>sql渠道:</label>
                            <select  id="editcardchannel" class="form-control"
                                     data-placeholder="请从列表选择一项">
                                <option value="">请选择查询渠道</option>
                                <option th:each="SqlChannel : ${sqltype}" th:value="${SqlChannel.infoId}" th:text="${SqlChannel.info}">
                                    sql渠道不存在
                                </option>
                            </select>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="cardIp"><span class="asterisk">*</span>数据库ip:</label>
                            <input id="editcardIp" type="text" class="form-control"  placeholder="输入数据库ip">
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="cardPort"><span class="asterisk">*</span>数据库端口:</label>
                            <input id="editcardPort" type="text" class="form-control" placeholder="输入数据库端口">
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="cardDatabaseName"><span class="asterisk">*</span>数据库的库名:</label>
                            <input id="editcardDatabaseName" type="text" class="form-control" placeholder="输入数据库的库名">
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="cardUser"><span class="asterisk">*</span>数据库的用户名:</label>
                            <input id="editcardUser" type="text" class="form-control" placeholder="输入数据库的用户名">
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="cardPassword"><span class="asterisk">*</span>数据库的密码:</label>
                            <input id="editcardPassword" type="text" class="form-control" placeholder="输入数据库的密码">
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="cardDriver"><span class="asterisk">*</span>数据库的驱动:</label>
                            <input id="editcardDriver" type="text" class="form-control" placeholder="输入数据库的驱动">
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button onclick="yin()" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" form="addForm" class="btn btn-primary"
                        data-action="{type:'submit',form:'#editForm',url:'@{/display/update}',after:'$.myAction.refreshTable'}">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>
<!-- xiangqing Modal -->
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="detailsModalLabel">详情</h4>
            </div>
            <div class="modal-body">
                <form id="detailsForm">
                    <div class="form-group">
                        <label class="control-label" for="userName"><span class="asterisk">*</span>商家名:</label>
                        <input id="detailsuserName" disabled="disabled" type="text" class="form-control" name="userName" placeholder="请输入商家名"
                               minlength="3" required>
                        <div class="help-block with-errors"></div>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="CompanyId"><span class="asterisk">*</span>商家编号:</label>
                        <input id="detailsCompanyId" disabled="disabled" type="text" class="form-control" name="companyid" placeholder="请输入商家编号"
                               minlength="3" required>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="CompanyId"><span class="asterisk">*</span>倍数:</label>
                        <input id="detailspercentage" disabled="disabled" type="text" class="form-control" name="percentage" placeholder="请输入倍数"
                               minlength="3" required>
                    </div>
                    <div class="form-group">
                        <label class="control-label" ><span class="asterisk">*</span>是否有刷卡:</label>
                        是<input type="radio" name="locked" disabled="disabled"  id="detailseditxiuyao" value="1" onclick="editidCode(1)">
                        否<input type="radio" name="locked"  disabled="disabled" id="detailseditbuxiuyao" value="0" onclick="detailsidCode(0)" checked>
                        <div class="help-block with-errors" ></div>
                    </div>

                    <div id="detailsscanister">
                        <hr/>
                        <h4 class="modal-title" id="detailsscanisters">第三方支付的数据库地址</h4>
                        <input  id="detailscardType" name="databaseVos[0].cardType" style="display: none" value="0">
                        <div class="form-group">
                            <label class="control-label"  for="detailschannel"><span class="asterisk">*</span>sql渠道:</label>
                            <select disabled="disabled" id="detailschannel" class="form-control"
                                    data-placeholder="请从列表选择一项" required>
                                <option value="">请选择查询渠道</option>
                                <option th:each="SqlChannel : ${sqltype}" th:value="${SqlChannel.infoId}" th:text="${SqlChannel.info}">
                                    sql渠道不存在
                                </option>
                            </select>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="detailsip"><span class="asterisk">*</span>数据库ip:</label>
                            <input id="detailsip" disabled="disabled" type="text" class="form-control"  placeholder="输入数据库ip" required>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="detailsport"><span class="asterisk">*</span>数据库端口:</label>
                            <input id="detailsport"disabled="disabled" type="text" class="form-control" placeholder="输入数据库端口" required>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="detailsDatabaseName"><span class="asterisk">*</span>数据库的库名:</label>
                            <input id="detailsDatabaseName" disabled="disabled" type="text" class="form-control" placeholder="输入数据库的库名" required>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="detailsuser"><span class="asterisk">*</span>数据库的用户名:</label>
                            <input id="detailsuser" disabled="disabled" type="text" class="form-control" placeholder="输入数据库的用户名" required>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="detailspassword"><span class="asterisk">*</span>数据库的密码:</label>
                            <input id="detailspassword" disabled="disabled" type="text" class="form-control" placeholder="输入数据库的密码" required>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="detailsdriver"><span class="asterisk">*</span>数据库的驱动:</label>
                            <input id="detailsdriver" disabled="disabled" type="text" class="form-control" placeholder="输入数据库的驱动" required>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>

                    <div id="detailscard">
                        <hr/>
                        <h4 class="modal-title" id="detailscards">刷卡的数据库地址</h4>
                        <div class="form-group">
                            <label class="control-label" for="cardchannel"><span class="asterisk">*</span>sql渠道:</label>
                            <select  id="detailscardchannel" class="form-control"
                                     data-placeholder="请从列表选择一项" disabled="disabled">
                                <option value="">请选择查询渠道</option>
                                <option th:each="SqlChannel : ${sqltype}" th:value="${SqlChannel.infoId}" th:text="${SqlChannel.info}">
                                    sql渠道不存在
                                </option>
                            </select>
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="cardIp"><span class="asterisk">*</span>数据库ip:</label>
                            <input id="detailscardIp" type="text" disabled="disabled" class="form-control"  placeholder="输入数据库ip">
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="cardPort"><span class="asterisk">*</span>数据库端口:</label>
                            <input id="detailscardPort" type="text" disabled="disabled" class="form-control" placeholder="输入数据库端口">
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="cardDatabaseName"><span class="asterisk">*</span>数据库的库名:</label>
                            <input id="detailscardDatabaseName" disabled="disabled" type="text" class="form-control" placeholder="输入数据库的库名">
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="cardUser"><span class="asterisk">*</span>数据库的用户名:</label>
                            <input id="detailscardUser" type="text" disabled="disabled" class="form-control" placeholder="输入数据库的用户名">
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="cardPassword"><span class="asterisk">*</span>数据库的密码:</label>
                            <input id="detailscardPassword" disabled="disabled" type="text" class="form-control" placeholder="输入数据库的密码">
                            <div class="help-block with-errors"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="cardDriver"><span class="asterisk">*</span>数据库的驱动:</label>
                            <input id="detailscardDriver" disabled="disabled" type="text" class="form-control" placeholder="输入数据库的驱动">
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button onclick="detailsyin()" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


<!-- delete modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteSmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="deleteSmallModalLabel">删除设备信息</h4>
            </div>
            <div class="modal-body">
                <form id="deleteForm"></form>
                确定要删除选中的 <span class="records"></span> 条记录?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" form="deleteForm" class="btn btn-primary"
                        data-action="{type:'submit',form:'#deleteForm',url:'@{/display/delete-batch}',after:'$.myAction.refreshTable'}">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>
<div id="actionButtons" class="admin-hide">
    <a class="like" href="javascript:void(0)" data-toggle="tooltip" title="详情"><i class="glyphicon glyphicon-heart"></i></a>　
    <a shiro:hasPermission="pos:update" class="edit ml10" href="javascript:void(0)" data-toggle="tooltip" title="编辑"><i class="glyphicon glyphicon-edit"></i></a>　
    <a shiro:hasPermission="pos:delete" class="remove ml10" href="javascript:void(0)" data-toggle="tooltip" title="删除"><i class="glyphicon glyphicon-remove"></i></a>　
</div>

<script th:inline="javascript">

    var $table = $('#table');

    $(function () {
        //Date range picker
        var beginTimeTake;
        $('#reservation').daterangepicker({
            "timePicker": false,
            "timePicker24Hour": true,
            "linkedCalendars": false,
            "autoUpdateInput": false,
            "locale": {
                format: 'YYYY-MM-DD',
                separator: ' ~ ',
                applyLabel: "应用",
                cancelLabel: "取消",
                resetLabel: "重置",
                daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
                monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            }
        }, function (start, end, label) {
            if (!this.startDate) {
                this.element.val('');
            } else {
                $('#startDate').val(this.startDate.format(this.locale.format));
                $('#endDate').val(this.endDate.format(this.locale.format));
                this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
            }
        });
        // bootstrap table初始化
        // http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
        $table.bootstrapTable({
            url: CONTEXT_PATH + '/display/selectlist',
            idField: 'id',
            columns: [
                {field: 'state', checkbox: true},
                {field: 'id', title: '编号', sortable: true, halign: 'left'},
                {field: 'userName', title: '商家名', sortable: false, halign: 'left'},
                {field: 'companyid', title: '商家编号', sortable: false, halign: 'left'},
                {field: 'percentage', title: '倍数', sortable: false, halign: 'left'},
                {field: 'createTime', title: '创建时间', sortable: false, halign: 'left'},
                {
                    field: 'action',
                    title: '操作',
                    halign: 'center',
                    align: 'center',
                    formatter: 'actionFormatter',
                    events: 'actionEvents',
                    clickToSelect: false
                }
            ]
        });
    });

    //隐藏支付渠道
    function idCode(i) {
        if (i==0) {
            $("#card").hide();

            $("#cardchannel").removeAttr("data-placeholder");
            $("#cardchannel").removeAttr("required");
            $("#cardIp").removeAttr("required");
            $("#cardPort").removeAttr("required");
            $("#cardDatabaseName").removeAttr("required");
            $("#cardUser").removeAttr("required");
            $("#cardPassword").removeAttr("required");
            $("#cardDriver").removeAttr("required");

            $("#cardchannel").removeAttr("name");
            $("#cardIp").removeAttr("name");
            $("#cardPort").removeAttr("name");
            $("#cardDatabaseName").removeAttr("name");
            $("#cardUser").removeAttr("name");
            $("#cardPassword").removeAttr("name");
            $("#cardDriver").removeAttr("name");
            $("#cardTypes").removeAttr("name");

        }else{
            $("#card").show();
            $("#cardchannel").attr("name","databaseVos[1].channel");
            $("#cardIp").attr("name","databaseVos[1].ip");
            $("#cardPort").attr("name","databaseVos[1].port");
            $("#cardDatabaseName").attr("name","databaseVos[1].DatabaseName");
            $("#cardUser").attr("name","databaseVos[1].user");
            $("#cardPassword").attr("name","databaseVos[1].password");
            $("#cardDriver").attr("name","databaseVos[1].driver");
            $("#cardTypes").attr("name","databaseVos[1].cardType");

            $("#cardchannel").attr("data-placeholder","请从列表选择一项");
            $("#cardchannel").attr("required","");
            $("#cardIp").attr("required","");
            $("#cardPort").attr("required","");
            $("#cardDatabaseName").attr("required","");
            $("#cardUser").attr("required","");
            $("#cardPassword").attr("required","");
            $("#cardDriver").attr("required","");
        }
    }


    function yin(i) {
        $("#card").hide();

        $("#cardchannel").removeAttr("data-placeholder");
        $("#cardchannel").removeAttr("required");
        $("#cardIp").removeAttr("required");
        $("#cardPort").removeAttr("required");
        $("#cardDatabaseName").removeAttr("required");
        $("#cardUser").removeAttr("required");
        $("#cardPassword").removeAttr("required");
        $("#cardDriver").removeAttr("required");

        $("#cardchannel").removeAttr("name");
        $("#cardIp").removeAttr("name");
        $("#cardPort").removeAttr("name");
        $("#cardDatabaseName").removeAttr("name");
        $("#cardUser").removeAttr("name");
        $("#cardPassword").removeAttr("name");
        $("#cardDriver").removeAttr("name");
        $("#cardTypes").removeAttr("name");
    }
    // 数据表格展开内容
    function detailFormatter(index, row) {
        var html = [];
        $.each(row, function (key, value) {
            html.push('<p><b>' + key + ':</b> ' + value + '</p>');
        });
        return html.join('');
    }

    function actionFormatter(value, row, index) {
        return $('#actionButtons').html();
    }

    window.actionEvents = {
        'click .like': function (e, value, row, index) {
            $('#detailsModal').modal('show')
            $('#detailsForm').fillForm(row);
            detailsAfter('', row);
            console.log(value, row, index);
        },
        'click .edit': function (e, value, row, index) {
            $('#editModal').modal('show')
            $('#editForm').fillForm(row);
            editAfter('', row);
            console.log(value, row, index);
        },
        'click .remove': function (e, value, row, index) {
            $('#deleteModal').modal('show');
            $('.records').html('1');
            var html = '';
            for (var key in row) {
                html += '<input type="hidden" name="' + key + '" value="' + row[key] + '">';
            }
            $('#deleteForm').html(html);
        }
    };

    function detailsAfter(obj, row) {
        $("#detailseditxiuyao").removeAttr("checked");
        $("#detailseditbuxiuyao").attr("checked","checked");
        $("#detailscard").hide();
        var  newModelNameList =row.databaseVos;
        for (i in newModelNameList) {
            if (newModelNameList.length >= 2 && newModelNameList[i].cardType=="1") {
                $("#detailscard").show();
                $("#detailscardchannel").val(newModelNameList[i].channel);
                $("#detailscardIp").val(newModelNameList[i].ip);
                $("#detailscardPort").val(newModelNameList[i].port);
                $("#detailscardDatabaseName").val(newModelNameList[i].databaseName);
                $("#detailscardUser").val(newModelNameList[i].user);
                $("#detailscardPassword").val(newModelNameList[i].password);
                $("#detailscardDriver").val(newModelNameList[i].driver);
                $("#detailscardTypes").val(newModelNameList[i].cardType);
                $("#detailseditbuxiuyao").removeAttr("checked");
                $("#detailseditxiuyao").attr("checked","checked");
            }else {
                $("#detailschannel").val(newModelNameList[i].channel);
                $("#detailsip").val(newModelNameList[i].ip);
                $("#detailsport").val(newModelNameList[i].port);
                $("#detailsDatabaseName").val(newModelNameList[i].databaseName);
                $("#detailsuser").val(newModelNameList[i].user);
                $("#detailspassword").val(newModelNameList[i].password);
                $("#detailsdriver").val(newModelNameList[i].driver);
                $("#detailscardType").val(newModelNameList[i].cardType);
            }
        }
    }

    function editAfter(obj, row) {
        clear();
        var  newModelNameList =row.databaseVos;
        for (i in newModelNameList) {
            if (newModelNameList.length >= 2 && newModelNameList[i].cardType=="1") {
                xianshi();
                $("#editcardchannel").val(newModelNameList[i].channel);
                $("#editcardIp").val(newModelNameList[i].ip);
                $("#editcardPort").val(newModelNameList[i].port);
                $("#editcardDatabaseName").val(newModelNameList[i].databaseName);
                $("#editcardUser").val(newModelNameList[i].user);
                $("#editcardPassword").val(newModelNameList[i].password);
                $("#editcardDriver").val(newModelNameList[i].driver);
                $("#editcardTypes").val(newModelNameList[i].cardType);
                $("#editeditbuxiuyao").removeAttr("checked");
                $("#editeditxiuyao").attr("checked","checked");
            }else {
                $("#editchannel").val(newModelNameList[i].channel);
                $("#editip").val(newModelNameList[i].ip);
                $("#editport").val(newModelNameList[i].port);
                $("#editDatabaseName").val(newModelNameList[i].databaseName);
                $("#edituser").val(newModelNameList[i].user);
                $("#editpassword").val(newModelNameList[i].password);
                $("#editdriver").val(newModelNameList[i].driver);
                $("#editcardType").val(newModelNameList[i].cardType);
            }
        }
    }

    function xianshi() {
        $("#editcard").show();
        $("#editcardchannel").attr("name","databaseVos[1].channel");
        $("#editcardIp").attr("name","databaseVos[1].ip");
        $("#editcardPort").attr("name","databaseVos[1].port");
        $("#editcardDatabaseName").attr("name","databaseVos[1].DatabaseName");
        $("#editcardUser").attr("name","databaseVos[1].user");
        $("#editcardPassword").attr("name","databaseVos[1].password");
        $("#editcardDriver").attr("name","databaseVos[1].driver");
        $("#editcardTypes").attr("name","databaseVos[1].cardType");

        $("#editcardchannel").attr("data-placeholder","请从列表选择一项");
        $("#editcardchannel").attr("required","");
        $("#editcardIp").attr("required","");
        $("#editcardPort").attr("required","");
        $("#editcardDatabaseName").attr("required","");
        $("#editcardUser").attr("required","");
        $("#editcardPassword").attr("required","");
        $("#editcardDriver").attr("required","");
        $("#editcardTypes").attr("required","");
    }

    function clear() {
        $("#editcard").hide();

        $("#editcardchannel").removeAttr("data-placeholder");
        $("#editcardchannel").removeAttr("required");
        $("#editcardIp").removeAttr("required");
        $("#editcardPort").removeAttr("required");
        $("#editcardDatabaseName").removeAttr("required");
        $("#editcardUser").removeAttr("required");
        $("#editcardPassword").removeAttr("required");
        $("#editcardTypes").removeAttr("required");
        $("#editcardDriver").removeAttr("required");

        $("#editcardchannel").removeAttr("name");
        $("#editcardIp").removeAttr("name");
        $("#editcardPort").removeAttr("name");
        $("#editcardDatabaseName").removeAttr("name");
        $("#editcardUser").removeAttr("name");
        $("#editcardPassword").removeAttr("name");
        $("#editcardDriver").removeAttr("name");
        $("#editcardTypes").removeAttr("name");

        $("#editeditxiuyao").removeAttr("checked");
        $("#editeditbuxiuyao").attr("checked","checked");
    }

    function editidCode(i) {
        if (i==0) {
            clear();
        }else {
            xianshi();
        }
    }
</script>
</html>